<template>
    <div class="areachoice">
        <div class="area_title">
        </div>
        <div class="area_company" @click="gomall" :style="is_superuser?'':'opacity:0.5'">
            <span>集团办公</span>
            <p>(可查看编辑系统中的全部内容)</p>
        </div>

        <div class="area_department">
            <span>人资</span>
            <p>(可查看编辑系统中的办公部门)</p>
        </div>

        <div class="area_center">
            <span>测试</span>
            <p>(可查看编辑系统中的办公部门)</p>
        </div>

         <div class="area_city">
            <span>当前地区：</span>
            <p>(可查看编辑当前地区的项目)</p>
        </div>

        <div class="area_object">
            <p>当前地区的项目：</p>
            <el-tag type="" size="medium" effect="dark" v-for="(item,index) in list" :key="item+index">
                {{item}}
            </el-tag>
        </div>

        <div class="bottom">
            <p>当前员工总数：人</p>
            <p>重庆项目：</p>
        </div>
        
    </div>
</template>

<script>
import {get,post} from '../../utils/axios.tool'
export default {
    data() {
        return {
            list:['荣昌项目','成都项目','重庆项目','重庆项目'],
            is_superuser:true,
            is_area_manager:false,
            is_project_manager:false,
        }
    },
    mounted(){
        // this.is_superuser = localStorage.getItem('is_superuser')
        // this.is_area_manager = localStorage.getItem('is_area_manager')
        // this.is_project_manager = localStorage.getItem('is_project_manager')
    },
    methods:{
        gomall(){
            this.$router.push({path:'/userinfo'})
        }
    }
}
</script>

<style lang="less">
.areachoice{
    width: 100%;
    height: 100%;
    background: url('../../assets/img/main-bg.jpg') no-repeat;
    background-size: 100% 100%;
    .area_title{
        text-align: center;
        width: 332px;
        height: 101px;
        position: absolute;
        left: 50%;
        margin-left: -166px;
        top: 8%;
        background: url('../../assets/img/main-title.png') no-repeat;
        background-size: 100% 100%;
    }
    .area_company{
        cursor: pointer;
        position: absolute;
        top: 35%;
        left: 17%;
        padding: 30px 40px 30px 40px;
        border: 1px solid skyblue;
        border-radius: 20px;
        background: url('../../assets/img/main-bg1.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: 10px 10px 5px black;
        span{
            font-size: 39px;
            color: black;
            font-family: cursive;
        }
    }
    .area_department{
        cursor: pointer;
        position: absolute;
        top: 35%;
        left: 60%;
        padding: 30px 40px 30px 40px;
        border: 1px solid skyblue;
        border-radius: 20px;
        background: url('../../assets/img/main-bg2.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: 10px 10px 5px black;
        span{
            font-size: 39px;
            color: white;
            font-family: cursive;
        }
        p{
            color: white;
        }
    }
    .area_city{
        cursor: pointer;
        position: absolute;
        top: 61%;
        left: 17%;
        padding: 30px 40px 30px 56px;
        border: 1px solid skyblue;
        border-radius: 20px;
        background: url('../../assets/img/main-bg4.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: 10px 10px 5px black;
        span{
            font-size: 39px;
            color: white;
            font-family: cursive;
        }
        p{
            color: white;
        }
    }
    .area_object{
        position: absolute;
        top: 61%;
        left: 60%;
        padding: 30px 40px 30px 56px;
        border: 1px solid skyblue;
        border-radius: 20px;
        width: 202px;
        background: url('../../assets/img/main-bg5.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: 10px 10px 5px black;
        p{
            font-size: 21px;
            color: white;
            font-family: cursive;
            margin: 0 0 15px 0;
        }
        span{
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 5px;
        }
    }
    .area_center{
        position: absolute;
        top: 35%;
        left: 40%;
        padding: 30px 40px 30px 56px;
        border: 1px solid skyblue;
        border-radius: 20px;
        width: 155px;
        height: 292px;
        background: url('../../assets/img/main-bg3.png') no-repeat;
        background-size: 100% 100%;
        box-shadow: 10px 10px 5px black;
        p{
            font-size: 21px;
            color: white;
            font-family: cursive;
            margin: 0 0 15px 0;
        }
        span{
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 5px;
        }
    }
    .area_object:hover ,.area_center:hover ,.area_city:hover ,.area_company:hover ,.area_department:hover{
        transform: scale(1.1);
    }
    .bottom{
        position: absolute;
        top: 4%;
        right: 5%;
        p{
            font-size: 19px;
            color: #00E0E8;
        }
    }
}
</style>